.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--modal-z-index, auto);
  isolation: isolate;

  .overlay {
    background-color: var(--color-modal-overlay);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }

  .window-positioner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &.width-regular {
      --window-width: calc(min(500px, 100%));
    }
    &.width-medium {
      --window-width: calc(min(650px, 100%));
    }
    &.width-large {
      --window-width: calc(min(800px, 100%));
    }
  }
}
